/**
 * 各类模板预览组件
 */
import React, { useCallback, useImperativeHandle, useState } from 'react';
import { useRequest, defaultFormatResult } from '@/hooks';
import { Modal, Spin } from 'antd';
import { getNoticeTemplatePreview } from '@/pages/Recruitment/Setting/service';
import styles from './index.less';

const TemplatePreview = React.forwardRef((props, ref) => {
    const [visible, setVisible] = useState(false);

    const { run, data, loading, mutate } = useRequest(id => getNoticeTemplatePreview({ id }), {
        manual: true,
        ...defaultFormatResult
    });
    useImperativeHandle(ref, () => ({
        open: id => {
            setVisible(true);
            run(id);
        }
    }));

    const handleCancel = useCallback(() => {
        mutate(null);
        setVisible(false);
    }, [mutate]);

    return (
        <Modal width={952} title="预览" visible={visible} onCancel={handleCancel} footer={null}>
            <div className={styles.previewWrap}>
                <div className={styles.previewContainer}>
                    <Spin spinning={loading} style={{ width: '100%' }}>
                        {data?.content && <div dangerouslySetInnerHTML={{ __html: data?.content }} />}
                    </Spin>
                </div>
            </div>
        </Modal>
    );
});
TemplatePreview.displayName = 'TemplatePreview';

export default React.memo(TemplatePreview);
